//程序入口
window.main = function ($) {
  var list = $(".list");
  var panel = $(".show-panel");
  var setListHeight = function () {
    list.css("height", window.innerHeight - 200 + "px");
  };
  var setListData = function () {
    for (let i = 0; i < 30; i++) {
      list.append('<div class="item">item-' + i + "</div>");
    }
  };
  var registerEvents = function () {
    $(".list .item").hover(
      function (e) {
        var t = e.target;
        var tStyle = getComputedStyle(e.target);
        var tLeft = t.offsetLeft;
        var tWidth = parseInt(tStyle.width);
        var tTop = t.offsetTop;
        var listScrollTop = list.scrollTop();
        var tHeight = parseInt(tStyle.height);

        var windowHeight = window.innerHeight;
        var panelHeight = panel.height();

        var left = tLeft + tWidth;
        var top = tTop - listScrollTop;

        if (top + panelHeight > windowHeight) {
          top = windowHeight - panelHeight - 10;
        }
        panel.text($(t).text());
        panel.css({
          left: left + "px",
          top: top + "px",
          display: "block",
        });
      },
      function (e) {
        panel.css({
          display: "none",
        });
      }
    );
  };
  setListHeight();
  setListData();
  registerEvents();
};
